<template>
  <div class="dialog">
    <fx-card title="基础用法">
      <fx-dialog v-model:visible="baseVisible" title="自定义标题">
        <div>{{ defaultText }}</div>
        <template #footer>
          <div style="display:flex;justify-content: flex-end;">
            <fx-button @click="baseVisible=false">取 消</fx-button>
            <fx-button type="primary" @click="baseVisible=false">确 定</fx-button>
          </div>
        </template>
      </fx-dialog>
      <fx-button @click="baseVisible=true">打开</fx-button>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="关闭前回调 仅对点击关闭按钮/点击模态窗/Esc退出有效">
      <fx-dialog v-model:visible="beforeVisible" :before-close="beforeClose">
        <div>{{ defaultText }}</div>
        <template #footer>
          <div style="display:flex;justify-content: flex-end;">
            <fx-button type="primary" @click="beforeVisible=false">确 定</fx-button>
          </div>
        </template>
      </fx-dialog>
      <fx-button @click="beforeVisible=true">打开</fx-button>
      <template #hide>
        <pre v-highlight="before"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义top/width/show-modal">
      <fx-dialog v-model:visible="widthVisible" top="20px" width="80%" :show-modal="false">
        <template #title>
          <div>
            插槽自定义标题
          </div>
        </template>
        <div>{{ defaultText }}</div>
        <template #footer>
          <div style="display:flex;justify-content: flex-end;">
            <fx-button type="primary" @click="widthVisible=false">确 定</fx-button>
          </div>
        </template>
      </fx-dialog>
      <fx-button @click="widthVisible=true">打开</fx-button>
      <template #hide>
        <pre v-highlight="width"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { DialogBeforeClose } from '@/base/dialog/dialog.vue'
import { defaultContent } from '@/assets/menuList'
import { FxConfirm, FxMessage } from '@/base'

export default defineComponent({
  name: 'viewDialog',
  setup () {
    const defaultText = defaultContent
    const baseVisible = ref<boolean>(false)
    const beforeVisible = ref<boolean>(false)
    const widthVisible = ref<boolean>(false)

    const beforeClose: DialogBeforeClose = (done) => {
      FxConfirm('是否关闭?').then(() => {
        FxMessage.success('成功关闭!')
        done()
      }).catch(() => {
        FxMessage.warning('取消了关闭!')
      })
    }

    const base = `<fx-dialog v-model:visible="baseVisible" title="自定义标题">
  <div>{{ defaultText }}</div>
  <template #footer>
    <div style="display:flex;justify-content: flex-end;">
      <fx-button @click="baseVisible=false">取 消</fx-button>
      <fx-button type="primary" @click="baseVisible=false">确 定</fx-button>
    </div>
  </template>
</fx-dialog>
<fx-button @click="baseVisible=true">打开</fx-button>`

    const before = `<fx-dialog v-model:visible="beforeVisible" :before-close="beforeClose">
  <div>{{ defaultText }}</div>
  <template #footer>
    <div style="display:flex;justify-content: flex-end;">
      <fx-button type="primary" @click="beforeVisible=false">确 定</fx-button>
    </div>
  </template>
</fx-dialog>
<fx-button @click="beforeVisible=true">打开</fx-button>

export default defineComponent({
    setup() {
      const beforeClose: DialogBeforeClose = (done) => {
        FxConfirm('是否关闭?').then(() => {
          FxMessage.success('成功关闭!')
          done()
        }).catch(() => {
          FxMessage.warning('取消了关闭!')
        })
      }
    }
})`

    const width = `<fx-dialog v-model:visible="widthVisible" top="20px" width="80%" :show-modal="false">
  <template #title>
    <div>
      插槽自定义标题
    </div>
  </template>
  <div>{{ defaultText }}</div>
  <template #footer>
    <div style="display:flex;justify-content: flex-end;">
      <fx-button type="primary" @click="widthVisible=false">确 定</fx-button>
    </div>
  </template>
</fx-dialog>
<fx-button @click="widthVisible=true">打开</fx-button>`

    return {
      defaultText,
      baseVisible,
      beforeVisible,
      widthVisible,
      beforeClose,
      base,
      before,
      width
    }
  }
})
</script>

<style scoped lang="scss">
.dialog {
}
</style>
